<script setup lang="ts">
import { ref } from "vue"
const imgList = ref([
  "https://img2.baidu.com/it/u=1999789325,3818518857&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=203",
  "https://img2.baidu.com/it/u=3633816548,4018194544&fm=253&fmt=auto&app=138&f=PNG?w=801&h=335",
  "https://img2.baidu.com/it/u=4189319335,370142420&fm=253&fmt=auto&app=138&f=JPEG?w=641&h=235"
])
</script>

<template>
  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in imgList" :key="item">
      <img class="image" :src="item" />
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped lang="scss">
.el-carousel {
  height: calc(100vh - 180px);
}
::v-deep .el-carousel__container {
  height: 100% !important;
}
.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
